<template>
    <div class="container">
        <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 ">
            <div class="handle-box">
                <div class="EnhancedTableToolbar-title-373">
                    <div>PEER节点
                        <el-button class="mr10" type="primary"
                            @click="dialogPeerNodeVisible = true,getOrganizationRequest()">
                            <el-icon>
                                <Plus />
                            </el-icon>添加PEER节点
                        </el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="name" label="名称(ID)" align="center"></el-table-column>
                <el-table-column prop="ip" label="IP地址" width="200"></el-table-column>
                <el-table-column prop="port" label="端口"></el-table-column>
                <el-table-column prop="listenChain" label="ChainCode监听端口"></el-table-column>
                <el-table-column prop="listenEvent" label="事件监听端口"></el-table-column>
                <el-table-column prop="msp_n" label="当前节点MSP"></el-table-column>
                <el-table-column prop="msp_a" label="管理员MSP"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button type="primary" key="primary" @click="deletePeerNodeRequest(scope.$index)">删除
                        </el-button>
                        <el-button type="primary" key="primary"
                            @click="getSearchPeerNodeRequest(scope.$index), infoDialogVisible=true">详情</el-button>
                        <el-button type="primary" key="primary" @click="goToConsole(scope.$index)">控制台</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogPeerNodeVisible" title="添加Peer节点" width="30%">
            <el-form :model="newPeerNodeData">
                <el-form-item label="名称(ID)*" :label-width="peerNodeFormLabelWidth">
                    <el-input v-model="newPeerNodeData.peerNodeId" autocomplete="off" />
                </el-form-item>
                <el-form-item label="IP地址*" :label-width="peerNodeFormLabelWidth">
                    <el-input type="text" v-model="newPeerNodeData.ipAddr" autocomplete="off" />
                </el-form-item>
                <el-form-item label="端口*" :label-width="peerNodeFormLabelWidth">
                    <el-input type="text" v-model="newPeerNodeData.port" autocomplete="off" />
                </el-form-item>
                <el-form-item label="链码监听端口*" :label-width="peerNodeFormLabelWidth">
                    <el-input type="text" v-model="newPeerNodeData.chainCodeListenPort" autocomplete="off" />
                </el-form-item>
                <el-form-item label="事件监听端口*" :label-width="peerNodeFormLabelWidth">
                    <el-input type="text" v-model="newPeerNodeData.eventListenPort" autocomplete="off" />
                </el-form-item>
                <el-form-item label="当前节点MSP" :label-width="peerNodeFormLabelWidth">
                    <el-select v-model="newPeerNodeData.currentNodeMSP">
                        <el-option v-for="item in LocalNodeMSPOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="管理员MSP" :label-width="peerNodeFormLabelWidth">
                    <el-select v-model="newPeerNodeData.mgrMSP">
                        <el-option v-for="item in AdminNodeMSPOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="postAddPeerNodeRequest()">提交</el-button>
                    <el-button @click="dialogPeerNodeVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="infoDialogVisible" width="40%">
            <el-descriptions title="查看Peer节点" direction="horizontal" column="1" border>
                <el-descriptions-item label="名称(ID)">{{ peerNodeInfo.peerNodeId }}</el-descriptions-item>
                <el-descriptions-item label="IP地址">{{ peerNodeInfo.ipAddr }}</el-descriptions-item>
                <el-descriptions-item label="端口">{{ peerNodeInfo.port }}</el-descriptions-item>
                <el-descriptions-item label="链码监听端口">{{ peerNodeInfo.chainCodeListenPort }}</el-descriptions-item>
                <el-descriptions-item label="事件监听端口">{{ peerNodeInfo.eventListenPort }}</el-descriptions-item>
                <el-descriptions-item label="当前节点MSP">{{ peerNodeInfo.currentNodeMSP }}</el-descriptions-item>
                <el-descriptions-item label="管理员MSP">{{ peerNodeInfo.mgrMSP }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import axios from 'axios';
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { usePeerNodeStore } from '../store/peerConsole';

const peerNodeStore = usePeerNodeStore();           //peer节点store

const router = useRouter();

const tableData = ref([]) as any;

const infoDialogVisible = ref(false);               // 节点详细信息

const newPeerNodeData = reactive({
    peerNodeId: '',                                 // 节点名称
    ipAddr: '',                                     // IP地址
    port: '',                                       // 端口
    chainCodeListenPort: '',                         // 链码监听端口
    eventListenPort: '',                            // 事件监听端口
    currentNodeMSP: '',                             // 当前节点MSP
    mgrMSP: ''                                      // 管理员MSP
});

const peerNodeFormLabelWidth = '140px'              // 对话框宽度

const dialogPeerNodeVisible = ref(false);           // 添加节点对话框

const LocalNodeMSPOptions = reactive([]) as any;                // 当前节点MSP选项
const AdminNodeMSPOptions = reactive([]) as any;                // 管理员节点MSP选项

onMounted(() => {
    getAllPeerNodeRequest();
})
// 查询所有peer节点
const getAllPeerNodeRequest = () => {
    tableData.value = [];
    axios.get('prefix/api/entity/peers', {
    }).then(function (response) {
        let length = response.data.peers == null ? 0 : response.data.peers.length;
        for (let i = 0; i < length; i++) {
            tableData.value.push({
                name: response.data.peers[i].Name,
                ip: response.data.peers[i].ListenAddress,
                port: response.data.peers[i].ListenPort,
                listenChain: response.data.peers[i].ChainCodeListenPort,
                listenEvent: response.data.peers[i].EventListenPort,
                msp_n: response.data.peers[i].LocalMSPID,
                msp_a: response.data.peers[i].AdminMSPID
            })
        }
        console.log(response);
    }).catch(function (error) {
        ElMessage.error("查询节点失败!" + error);
        console.log(error);
    })
}

// 查询组织信息
const getOrganizationRequest = () => {
    LocalNodeMSPOptions.splice(0, LocalNodeMSPOptions.length);
    AdminNodeMSPOptions.splice(0, AdminNodeMSPOptions.length);
    axios.get('/prefix/api/entity/organizations', {
    }).then(function (response) {
        let length = response.data.organizations == null ? 0 : response.data.organizations.length;
        // 获取所有当前节点MSP和管理员节点MSP
        for (let i = 0; i < length; i++) {
            LocalNodeMSPOptions.push({
                label: response.data.organizations[i].MSPs[1].Name,
                value: response.data.organizations[i].MSPs[1].Name
            })
            AdminNodeMSPOptions.push({
                label: response.data.organizations[i].MSPs[2].Name,
                value: response.data.organizations[i].MSPs[2].Name
            })
        }
    }).catch(function (error) {
        ElMessage.error("查询组织信息失败!");
        console.log(error);
    })
}

// 添加节点
const postAddPeerNodeRequest = () => {
    axios.post('prefix/api/entity/peers/' + newPeerNodeData.peerNodeId, {
        Name: newPeerNodeData.peerNodeId,                                       //节点名称不能为空!!!这里没有做限制!!!
        ListenAddress: newPeerNodeData.ipAddr,
        ListenPort: Number(newPeerNodeData.port),
        ChainCodeListenPort: Number(newPeerNodeData.chainCodeListenPort),
        EventListenPort: Number(newPeerNodeData.eventListenPort),
        LocalMSPID: newPeerNodeData.currentNodeMSP,
        AdminMSPID: newPeerNodeData.mgrMSP
    }).then(function (response) {
        getAllPeerNodeRequest();
        dialogPeerNodeVisible.value = false;
        ElMessage.success("添加节点成功!");
        console.log(response);
    }).catch(function (error) {
        ElMessage.error("添加节点失败!" + error);
        console.log(error);
    })
}

// 查看节点
const peerNodeInfo = ref({
    peerNodeId: '',                                 // 节点名称
    ipAddr: '',                                     // IP地址
    port: '',                                       // 端口
    chainCodeListenPort: '',                        // 链码监听端口
    eventListenPort: '',                            // 事件监听端口
    currentNodeMSP: '',                             // 当前节点MSP
    mgrMSP: ''                                      // 管理员MSP
});
const getSearchPeerNodeRequest = (index) => {
    axios.get('prefix/api/entity/peers/' + tableData.value[index].name, {
    }).then(function (response) {
        peerNodeInfo.value.peerNodeId = response.data.Name,
            peerNodeInfo.value.ipAddr = response.data.ListenAddress,
            peerNodeInfo.value.port = response.data.ListenPort,
            peerNodeInfo.value.chainCodeListenPort = response.data.ChainCodeListenPort,
            peerNodeInfo.value.eventListenPort = response.data.EventListenPort,
            peerNodeInfo.value.currentNodeMSP = response.data.LocalMSPID,
            peerNodeInfo.value.mgrMSP = response.data.AdminMSPID
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 删除节点
const deletePeerNodeRequest = (index) => {
    axios.delete('prefix/api/entity/peers/' + tableData.value[index].name, {
    }).then(function (response) {
        getAllPeerNodeRequest();
        ElMessage.success("删除节点成功!");
        console.log(response);
    }).catch(function (error) {
        ElMessage.error("删除节点失败!" + error);
        console.log(error);
    })
}

// 跳转到控制台
const goToConsole = (index) => {
    peerNodeStore.setPeerNodeName(tableData.value[index].name);
    router.push('/peerConsole');
}
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  